<script setup>
import Toast from '@/components/toast'
import { useRouter } from 'vue-router'
import { computed } from 'vue'
import { enumStore } from '@/store/enum'
import { storeToRefs } from 'pinia'
import commonModel from '@/http/modules/common.js'
import Utility from '@/utils/utility'
const enum_store = enumStore()
const { enumDslInfo } = storeToRefs(enum_store)
const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
})
const emit = defineEmits(['reset'])
const isWait = computed(() => {
  return `Returned`.includes(props.info.contractStatus)
})
// 已驳回
const isReturned = computed(() => {
  return `Returned`.includes(props.info.contractStatus)
})
// 草稿订单
const isDome = computed(() => {
  return `Draft`.includes(props.info.contractStatus)
})
// 收款中
const isEntering = computed(() => {
  return `Pending,Risking,Approved`.includes(props.info.contractStatus)
})
// 待关联入帐流水
const isRunning = computed(() => {
  return 'Initial'.includes(props.info.contractStatus)
})
const router = useRouter()

// 编辑
function handleEdit() {
  router.push(`/contract/create?id=${props.info.contractOrderNo}`)
}

function handleDelete() {
  Toast.open({
    type: 'none',
    title: '确定要删除该合同吗？',
    showClose: false,
    confirmFun: () => {
      commonModel
        .gatewayApi({
          bizContent: {
            contractOrderNo: props.info.contractOrderNo,
          },
          service: 'cb_trade_conteact_delete',
          version: '1.0.0',
        })
        .then(() => {
          emit('reset')
          Toast.close()
        })
    },
  })
}

function handleClose() {
  Toast.open({
    type: 'none',
    title: '确定要关闭该合同吗？',
    showClose: false,
    confirmFun: () => {
      commonModel
        .gatewayApi({
          bizContent: {
            contractOrderNo: props.info.contractOrderNo,
          },
          service: 'cb_trade_conteact_close',
          version: '1.0.0',
        })
        .then(() => {
          emit('reset')
          Toast.close()
        })
    },
  })
}

function handleDone() {
  Toast.open({
    type: 'none',
    title: '确定要对该合同做收款完成吗？',
    showClose: false,
    confirmFun: () => {
      commonModel
        .gatewayApi({
          bizContent: {
            contractOrderNo: props.info.contractOrderNo,
          },
          service: 'cb_trade_conteact_complete',
          version: '1.0.0',
        })
        .then(() => {
          emit('reset')
          Toast.close()
        })
    },
  })
}

function handleShowResultDialog() {
  Toast.open({
    type: 'none',
    title: '驳回原因：',
    className: 'rejection__dialog',
    content: props.info.contractStatusMsg,
    showClose: true,
    showCancel: false,
    confirmFun: () => {
      Toast.close()
    },
  })
}
</script>

<template>
  <div
    class="contract"
    @click="router.push(`/contract/detail/${props.info.contractOrderNo}`)"
  >
    <div class="contract-base fz-14">
      <div class="contract-base-info">
        <p>
          合同编号: <span>{{ props.info.contractNo }}</span>
        </p>
        <p class="fz-12">
          <span>{{ props.info.declType === 'Y' ? '报关单' : '非报关单' }}</span>
          <span v-if="props.info.setExc === 'Y'">结汇</span>
        </p>
      </div>
      <div class="contract-base-status">
        <span class="fz-14">{{
          props.info.whetherShip === 'Y' ? '已发货' : '未发货'
        }}</span>
        <p
          v-if="props.info.declType !== 'Y' && isEntering"
          class="fz-12"
          @click.stop="
            router.push(
              `/contract/create?id=${props.info.contractOrderNo}&step=2`
            )
          "
        >
          变更发货信息>
        </p>
      </div>
    </div>
    <div class="contract-user">
      <div class="contract-user-name">
        <p>{{ props.info.buyerName }}</p>
        <span
          :style="{
            color: ['Completed', 'Closed'].includes(info.contractStatus)
              ? '#999'
              : '#FAA64E',
          }"
          class="fz-14"
          >{{
            Utility.getTargetByValue(
              enumDslInfo.ContractOrderStatus,
              props.info.contractStatus
            ).name
          }}</span
        >
      </div>
      <div class="contract-user-row fz-14">
        合同金额: {{ $filters.formatMoney(props.info.totalOrderAmount) }}
        {{ props.info.currency
        }}{{
          Utility.getLabelByValue(enumDslInfo.CurrencyType, props.info.currency)
        }}
      </div>
      <div class="contract-user-row fz-14">
        待收款: {{ $filters.formatMoney(props.info.uncollectedAmount) }}
        {{ props.info.currency
        }}{{
          Utility.getLabelByValue(enumDslInfo.CurrencyType, props.info.currency)
        }}
      </div>
      <div class="contract-user-row fz-14">
        已收款: {{ $filters.formatMoney(props.info.receivedAmount) }}
        {{ props.info.currency
        }}{{
          Utility.getLabelByValue(enumDslInfo.CurrencyType, props.info.currency)
        }}
      </div>
      <div class="contract-user-row fz-14">
        {{ props.info.gmtCreate }}
      </div>
    </div>
    <div class="contract-btn fz-12">
      <div
        v-if="isReturned"
        class="rejection-reason"
        @click.stop="handleShowResultDialog"
      >
        <i class="iconfont icon-gantanhaoicon"></i>
        <p class="ellipsis2">驳回原因：{{ props.info.contractStatusMsg }}</p>
      </div>
      <span v-if="isDome">草稿</span>
      <button v-if="isRunning || isWait" @click.stop="handleClose">关闭</button>
      <button v-if="isDome" @click.stop="handleDelete">删除</button>
      <button v-if="isDome || isRunning || isWait" @click.stop="handleEdit">
        编辑
      </button>
      <button
        v-if="!info.lockedAmount && info.receivedAmount && props.info.whetherShip === 'Y' && info.contractStatus!=='Completed'"
        @click.stop="handleDone"
      >
        收款完成
      </button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.contract {
  background: #fff;
  border-radius: 0.08rem;
  overflow: hidden;
  margin-top: 0.1rem;
  &-base {
    @include fh;
    justify-content: space-between;
    padding: 0.1rem 0.12rem;
    background: linear-gradient(270deg, #eff4f8 0%, #dde5ec 100%);
    &-info {
      width: 2.4rem;
      p:nth-of-type(1) {
        color: #748291;
        word-break: break-all;
        span {
          color: #222;
        }
      }
      p:nth-of-type(2) {
        @include fh;
        margin-top: 0.08rem;
        span {
          color: #fff;
          background: #a5b3c1;
          border-radius: 0.04rem;
          margin-right: 0.04rem;
          padding: 0 0.04rem;
        }
      }
    }
    &-status {
      text-align: right;
      p {
        margin-top: 0.06rem;
        color: #3f84f3;
      }
    }
  }
  &-user {
    padding: 0.1rem 0.12rem;
    &-name {
      @include fh;
      justify-content: space-between;
      p {
        width: 2.1rem;
        color: #222;
        word-break: break-all;
      }
      span {
        color: #faa64e;
      }
    }
    &-row {
      margin-top: 0.08rem;
      color: #999999;
    }
  }
  &-btn {
    @include wh(3.27rem, 0.4rem);
    @include fh;
    justify-content: flex-end;
    margin: 0 auto;
    border-top: 1px solid #eee;
    .rejection-reason {
      margin-right: auto;
      display: flex;
      color: #f41d1d;
      i {
        margin-right: 2px;
      }
      .ellipsis2 {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: block;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    button {
      background: inherit;
      border: 1px solid #3f84f3;
      color: #3f84f3;
      border-radius: 0.14rem;
      min-width: 0.64rem;
      padding: 0.03rem 0.14rem;
      margin-left: 0.1rem;
      flex-shrink: 0;
    }
    span {
      color: #999;
      margin-right: auto;
    }
    p {
      color: #f41d1d;
      @include fh;
      margin-right: auto;
      i {
        margin-right: 0.02rem;
      }
    }
  }
}
</style>
<style lang="scss">
.rejection__dialog.toast-cover {
  .toast-box {
    .toast-title {
      margin: 0;
      text-align: left;
      color: #999999;
    }
    .toast-content {
      font-size: 14px;
      color: #222222;
      line-height: 18px;
      margin-top: 8px;
      text-align: left;
      white-space: pre-line;
      word-wrap: break-word;
    }
  }
}
</style>
